import { ref, onMounted, getCurrentInstance, watch } from 'vue'
import ColorPlatePopup from "./ColorPlatePopup.js";
import {getWorld3dInstance} from "../three/src/3d/scene/World3d.js";
import World3dEvent from "../three/src/3d/scene/event/World3dEvent.js";

export default {
  components: {
    ColorPlatePopup
  },
  setup(props, ctx) {
    const world3d = getWorld3dInstance()
    const show = ref(false)
    const surfacing = ref(false) // 生成区域航线时，航线的航点是否贴合曲面
    const toggleSurfacing = () => {
      const val = !surfacing.value
      world3d.changeAreaSurfacing(val)
      surfacing.value = val
    }
    world3d.scene.addEventListener(World3dEvent.workAreaSelected.type, () => {
      show.value = true
      areaColor.value = World3dEvent.workAreaSelected.value.color
      surfacing.value = World3dEvent.workAreaSelected.value.fromSurface
    })
    world3d.scene.addEventListener(World3dEvent.clearPaneSelection.type, () => {
      show.value = false
    })
    const areaColor = ref('#f78920');
    const plateVisible = ref(false);
    const setPlateVisible = (val) => {
      plateVisible.value = val
    }
    const onColorSelected = (color) => {
      console.log('onColorSelected: ', color)
      world3d.changeAreaColor(color)
    }
    const onClosed = () => {
      plateVisible.value = false
    }
    return {
      plateVisible,
      setPlateVisible,
      onColorSelected,
      onClosed,
      world3d,
      areaColor,
      show,
      surfacing,
      toggleSurfacing,
    }
  },
  template: `
  <div class="colors-pane" v-show="show">
    <div class="work-area-bar">
      <div class="bar-item right-border" @click="setPlateVisible(true)" title="改变油漆颜色">
        <img src="../assets/color.png"/>
      </div>
      <div :class="['bar-item', 'right-border', surfacing ? 'bar-item-active' : '']"  @click="toggleSurfacing" title="是否贴合曲面">
        <img src="../assets/radius.png"/>
      </div>
      <div class="bar-item right-border" @click="world3d.generateSingleAreaPath()" title="规划航线">
        <img src="../assets/constraint.png"/>
      </div>
      <div class="bar-item" @click="world3d.editWorkArea.removeAreaMesh()" title="删除工作区">
        <img src="../assets/delete.png"/>
      </div>
    </div>
    <ColorPlatePopup
      class="mt16"
      :selectedColor="areaColor"
      :plateVisible="plateVisible"
      :setPlateVisible="setPlateVisible"
      :onColorSelected="onColorSelected"
      :onClosed="onClosed"
    />
  </div>
  
  `
}
